<template>
  <div id="login" class="login">
    <div style="margin-top: 150px; width: 85%; padding: 20px;">
      <el-container :direction="horizontal">
        <el-aside  width="35%" style="margin-left:90px;">
          <el-card class="leftbox" shadow="always">
            <h1 class="title">登录</h1>
            <el-form :model="form" ref="form" class="form" style="margin-right: 25px">
              <el-form-item prop="username">
                <el-input class="emailinput" placeholder="邮箱" type="username" v-model="form.username"
                  autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item id="password" prop="password">
                <el-input placeholder="密码" show-password type="password" v-model="form.password" autocomplete="off"
                  @keyup.enter.native="login"></el-input>
              </el-form-item>
              <el-form-item class="btn_login">
                <el-button type="primary" @click="login" round>登&nbsp;&nbsp;录</el-button>
              </el-form-item>
            </el-form>
            <div class="suffix">
              <p @click="register">注册帐号</p>
            </div>
          </el-card>
        </el-aside>

        <el-main height="">
          <div style="text-align:center">
            <img alt="" src="../../../src/assets/images/undraw_Engineering_team_a7n2.png" class="img1">
          </div>

        </el-main>

      </el-container>
    </div>


    <!-- <div style="height:100%;width: 100%;position: fixed;text-align: center;"> -->
    <!--
        <div>
        </div> -->
    <!-- </div> -->
    <!-- <div class="wrap">
        <h1>登 录</h1>
        <el-form :model="form" ref="form" class="form">
          <el-form-item prop="username">
            <el-input class="emailinput" placeholder="邮箱" type="username" v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item id="password" prop="password">
            <el-input
              placeholder="密码"
              show-password
              type="password"
              v-model="form.password"
              autocomplete="off"
              @keyup.enter.native="login"
            ></el-input>
          </el-form-item>
          <el-form-item class="btn_login">
            <el-button type="primary" @click="login" round>登&nbsp;&nbsp;录</el-button>
          </el-form-item>
        </el-form>
        <div class="suffix">
          <p @click="register">注册帐号</p>
        </div>
      </div> -->
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      fromPath: "",
      form: {
        username: '',
        password: '',
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // console.log(from,'from')
      vm.fromPath = from.fullPath;
      console.log(vm.fromPath, 'frompath')
      next()
    })
    next()
  }
  ,
  methods: {
    login() {
      // const formData = {
      //   email:this.form.username,
      //   password:this.form.password,
      // }
      // alert(JSON.stringify(formData))
      // alert("email:"+this.form.username+"      password"+this.form.password)
      // 点击登录后向后端要数据
      const formData = new FormData();
      formData.append("email", this.form.username);
      formData.append("password", this.form.password);
      console.log(formData)
      this.$axios({
        method: 'POST',
        url: '/user/login/',
        // data: JSON.stringify(formData),
        data: formData
      })
        .then(res => {
          console.log(res.data)
          // alert(res.data.content)
          if (res.data.code == 200) {
            this.$message.success("登录成功");
            this.$store.state.isLogin = true;
            localStorage.setItem('token', res.data.content.token)
            this.$store.state.user = {
              'username': res.data.content.username,
              // 'Authorization': res.data.Authorization,
              'userId': res.data.content.userId,
              'type': res.data.content.type,
              'authorId': res.data.content.author_id,
              // 'authorId': res.data.detail.author_id,
              'email': this.form.username
            };
            sessionStorage.setItem('userId', res.data.content.userId)
            if (!res.data.content.author_id) {
              sessionStorage.setItem('authorId', 'null')
            }
            else sessionStorage.setItem('authorId', res.data.content.author_id)
            console.log(this.$store.state.user.authorId)
            // this.$store.state.isLogin=true;
            // alert(this.$store.state.user.authorId)
            // const history_pth = localStorage.getItem('preRoute');
            setTimeout(() => {
              // if (history_pth == null || history_pth === '/register') {
              //   this.$router.push('/');
              // } else {
              if (this.fromPath == "/register") {
                this.$router.push('/');
              }
              else {
                this.$router.push({ path: this.fromPath });
              }
              // alert(this.fromPath)
              // }
            }, 1000);
          } else {
            this.$message.error("用户名或密码错误");
          }
        })
        .catch(err => {
          console.log(err);
        })

      // 本地登录
      // user.state().user=this.form
      // this.$store.state.isLogin=true
      // alert("登录成功")
      // this.toHome();
    },
    register() {
      this.$router.push("/register");
    },
    toHome() {
      this.$router.push('/');
    }
  }
}
</script>

<style scoped>
.leftbox{
  padding-left:15px;
  padding-right:15px;

  /* border-radius: 5px; */
  /* box-shadow: 8px 8px 0px 24px rgba(0, 0, 0, 0.4); */
/* border: 0px solid rgba(187, 187, 187, 1); */
}
.title{
  color:black;padding-bottom: 20px; padding-top: 20px;
  font-size: 30px;
  letter-spacing: 6px;
}
.img1 {
  height: 400px;
}

#login .btn_login {
  margin-top: 25px;
  text-align: center;
}

#login .btn_login button {
  line-height: 10px;
  font-family: 'Noto Serif SC', serif;
  width: 100%;
  height: 38px;
}

#login .suffix {
  font-size: 14px;
  margin-right: 15px;
  line-height: 10px;
  color: #999;
  cursor: pointer;
  float: right;
}

/deep/ .el-input__inner {
  background: rgb(255, 255, 255, 0.8);
}

#login {
  display: flex;
  justify-content: center;
  font-family: source-han-sans-simplified-c, sans-serif;
  /* margin-top: 60px; */
  /* background:linear-gradient(to right,#333399,#ff00cc); */
}

#login>>>.el-input__inner {
  font-family: 'Noto Serif SC', serif;
}

#login .bgbox {
  display: block;
  opacity: 1;
  z-index: -3;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1s, transform .25s, filter .25s;
  backface-visibility: hidden;
}

/*   #login .logo {
    cursor: pointer;
    overflow: hidden;
    height: 150px;
  }
  #login .wrap {
    width: 300px;
    height: 100%;
    padding: 0 25px 0 25px;
    line-height: 40px;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
    /* bottom: 20%; */
/* margin-left: 20%; */
/*display: inline-block;
    /* background-color: rgba(255, 255, 255, 0.85); */
/* border-radius: 20px; */
/* background:linear-gradient(to right,rgba(255, 255, 255, 0.85),rgba(11, 236, 225, 0.85)); */
/*} */
</style>